<template>
  <view class="app-container">
    <!-- 顶部导航栏（与首页一致） -->
<!--    <view class="el-header">
      // {{ currentTime }}
    </view -->>

    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 顶部信息栏 -->
      <view class="top-info-bar">
        <picker mode="selector" :range="classes" range-key="label" @change="onClassChange">
          <view class="picker">
            {{ selectedClass.label || '选择班级' }}
          </view>
        </picker>
        <view class="progress-profile">
          <text class="progress-text">9 / 20 课时</text>
          <image
            src="/static/1.png"
            class="profile-image"
            mode="aspectFill"
          />
        </view>
      </view>

      <!-- 班级学生列表 -->
      <view class="student-list">
        <text class="student-title">班级学生</text>
        <view class="search-bar">
          <!-- 将uni-icons替换为u-icon -->
          <u-icon name="search" size="20" color="#333"></u-icon>
          <input
            placeholder="搜索学生"
            class="search-input"
            @input="onSearch"
          />
        </view>
        <view class="student-table">
          <view
            class="student-row"
            v-for="(student, index) in filteredStudents"
            :key="index"
          >
            <text class="student-name">{{ student.name }}</text>
            <text class="student-phone">{{ student.phone }}</text>
            <button
              class="upload-btn"
              size="mini"
              type="primary"
              @click="handleUpload(index, student)"
            >
              上传作品
            </button>
          </view>
        </view>
      </view>

      <!-- 上传作品弹窗 -->
      <view v-if="dialogVisible" class="dialog-mask">
        <view class="dialog">
          <view class="dialog-header">上传文件</view>
          <view class="dialog-content">
            <view class="upload-file">
              <!-- 修改后的文件上传组件 -->
              <u-upload
                :fileList="fileList3"
                @afterRead="afterRead"
                @delete="deletePic"
                name="3"
                multiple
                :maxCount="10"
                :previewFullImage="true"
              ></u-upload>
            </view>
          </view>
          <view class="dialog-footer">
            <button type="primary" @click="submitUpload">上传</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'ClassPage',
  data() {
    return {
      currentTime: '',
      selectedClass: {},
      dialogVisible: false,
      searchQuery: '',
      form: {
        workName: '',
        author: '',
        class: {}
      },
      classes: [
        { label: '绘画A班', value: 'paintingA' },
        { label: '绘画B班', value: 'paintingB' }
      ],
      students: [
        { name: '小白', phone: '1231345646' },
        { name: '小红', phone: '1234654665' }
      ],
      fileList3: [
        {
          url: 'https://uviewui.com/swiper/1.jpg  ', // 示例图片
        }
      ], // 修改后的文件列表
    };
  },
  computed: {
    filteredStudents() {
      return this.students.filter(student =>
        student.name.includes(this.searchQuery)
      );
    }
  },
  created() {
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
  },
  methods: {
    updateCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      this.currentTime = `${hours}:${minutes}`;
    },
    onClassChange(e) {
      this.selectedClass = this.classes[e.detail.value];
    },
    onSearch(e) {
      this.searchQuery = e.detail.value;
    },
    handleUpload(index, student) {
      console.log('上传作品', index, student);
      this.dialogVisible = true;
    },
    afterRead(event) {
      console.log('文件读取成功', event);
      // 处理文件读取成功后的逻辑
    },
    deletePic(event) {
      console.log('删除文件', event);
      // 处理文件删除逻辑
    },
    submitUpload() {
      console.log('提交上传', this.fileList3);
      this.dialogVisible = false;
    }
  }
};
</script>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.el-header {
  background-color: #409EFF;
  color: white;
  text-align: center;
  line-height: 60px;
  height: 60px;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}

.top-info-bar {
  background-color: #6366f1;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
}

.picker {
  width: 100%;
  padding: 10px;
  background-color: white;
  border-radius: 5px;
  color: #333;
}

.progress-profile {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.progress-text {
  font-size: 18px;
  flex: 1;
}

.profile-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.student-list {
  margin-top: 10px;
  padding: 10px;
}

.student-title {
  color: #ff0000;
  font-size: 18px;
  margin-bottom: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 5px;
}

.search-input {
  flex: 1;
  margin-left: 10px;
}

.student-table {
  border-top: 1px solid #eee;
}

.student-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.student-name {
  flex: 1;
}

.student-phone {
  flex: 1;
  color: #666;
}

.upload-btn {
  margin-left: 10px;
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dialog {
  width: 80%;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

.dialog-header {
  padding: 15px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.dialog-content {
  padding: 15px;
}

.upload-file {
  margin-bottom: 15px;
}

.dialog-footer {
  padding: 10px;
  text-align: center;
  border-top: 1px solid #eee;
}
</style>